<template>
	<uni-popup ref="bottomPopup" type="bottom" backgroundColor="#fff">
		<view class="popup-main">
			<h3 class='title'>
				<image @click="$refs.bottomPopup.close()" src="../../static/order/close.png" mode=""></image>
				{{title}}
			</h3>
			<view class="select-main">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-main" id="scroll-main"
					:scroll-into-view="toView">
					<view class="search-content" v-if="showSearch">
						<icon type="search" size="18"></icon>
						<input type="text" @input="keyInput" :placeholder="placeholder" class="search-input">
					</view>
					<view class="main-content">
						<view class="item-container" v-for="(item,i) in popupData" :key="i" @click="selectItem(item)">
							<!-- <image class="left-image" v-if="showItemImg" :src="item.src" mode="aspectFit"></image> -->
							<view class="item-text">{{item.shortName}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			title: '',
			showSearch: { //是否显示搜索框
				type: Boolean,
				default: true
			},
			placeholder: '', //搜索框的提示语
			showItemImg: { //是否显示每行数据的图标
				type: Boolean,
				default: true
			},
			popupData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				toView: '', //锚链接 初始值
				scrollTop: 0,
			}
		},
		onLaunch() {

		},
		onLoad() {

		},
		mounted() {

		},
		created() {

		},
		methods: {
			open() {
				this.$refs.bottomPopup.open()
			},
			close() {
				this.$refs.bottomPopup.close()
			},
			selectItem(val) {
				this.$emit('getSelect', val)
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@function vww($number) {
		@return ($number / 375) * 750+rpx;
	}

	.popup-main {
		width: 100vw;
		height: 90vh;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99999;

		.title {
			height: 110rpx;
			line-height: 110rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			position: relative;
			border-bottom: 1px solid #e5e5e5;

			image {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				left: 24rpx;
				top: 34rpx;
			}
		}
	}

	view {
		box-sizing: border-box;
	}

	.select-main {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #fff;

		.scroll-main {
			position: relative;
			width: 100%;
			height: 100%;
			background: #fff;
		}
	}

	.search-content {
		width: 100%;
		color: #4a4a4a;

		&>icon {
			position: absolute;
			left: 52rpx;
			top: 47rpx;
		}

		.search-input {
			width: 596rpx;
			margin: 32rpx;
			height: 64rpx;
			line-height: 32rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #4a4a4a;
			background: #F1F1F1;
			border-radius: 32rpx;
			padding-left: 72rpx;
		}
	}

	.main-content {
		margin-top: 56rpx;

		.item-container {
			display: flex;
			align-items: center;
			height: 90rpx;
			background: #FFFFFF;
			margin: 0 34rpx;
			border-bottom: 1px solid #d5d5d5;

			.left-image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}

			.item-text {
				font-size: 32rpx;
				color: #333333;
			}
		}

	}
</style>
